<template>
    <div class="d-flex justify-content-center">
        <div class="col-8">
            <div v-if="<%= entityInstance %>">
                <h2 class="jh-entity-heading" data-cy="<%= entityInstance %>DetailsHeading"><span>{{ t$('<%= i18nKeyPrefix %>.detail.title') }}<%= entityAngularName %></span> {{<%= entityInstance %>.<%= primaryKey.name %>}}</h2>
                <dl class="row-md jh-entity-details">
<%_ for (field of fields.filter(field => !field.id)) {
    const fieldName = field.fieldName;
    const fieldType = field.fieldType;_%>
                    <dt>
                        <span>{{ t$('<%= i18nKeyPrefix %>.<%= fieldName %>') }}</span>
                    </dt>
                    <dd>
  <%_ if (field.fieldIsEnum) { _%>
                        <span><% if (enableTranslation) { %>{{ t$('<%= frontendAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %>) }}<% } else { %>{{ <%= entityInstance %>.<%= fieldName %> }}<% } %></span>
  <%_ } else if (field.fieldTypeBinary && field.blobContentTypeImage) { _%>
                        <div v-if="<%= entityInstance %>.<%= fieldName %>">
                            <a @click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
                                <img :src="'data:' + <%=entityInstance %>.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>.<%= fieldName %>" style="max-width: 100%;" alt="<%=entityInstance %>"/>
                            </a>
                            {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
                        </div>
  <%_ } else if (field.fieldTypeBinary && field.blobContentTypeAny) { _%>
                        <div v-if="<%= entityInstance %>.<%= fieldName %>">
                            <a @click="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">{{ t$('entity.action.open') }}</a>
                            {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
                        </div>
  <%_ } else if (field.fieldTypeDuration) { _%>
                        <span>{{formatDuration(<%= entityInstance %>.<%= fieldName %>)}} ({{<%= entityInstance %>.<%= fieldName %>}})</span>
  <%_ } else if (field.fieldTypeTimed) { _%>
                        <span v-if="<%= entityInstance %>.<%=fieldName %>">{{formatDateLong(<%= entityInstance %>.<%=fieldName %>)}}</span>
  <%_ } else { _%>
                        <span>{{<%= entityInstance %>.<%= fieldName %>}}</span>
  <%_ } _%>
                    </dd>
<%_ } _%>
<%_ for (relationship of relationships.filter(rel => !rel.otherEntity.embedded)) {
    const relationshipName = relationship.relationshipName;
    const relationshipFieldName = relationship.relationshipFieldName;
    const relationshipFieldNamePlural = relationship.relationshipFieldNamePlural;
    const relationshipNameHumanized = relationship.relationshipNameHumanized;
    const otherEntityName = relationship.otherEntityName;
    const otherEntityField = relationship.otherEntityField;
_%>
  <%_ if (relationship.persistableRelationship) { _%>
                    <dt>
                        <span>{{ t$('<%= i18nKeyPrefix %>.<%= relationshipName %>') }}</span>
                    </dt>
                    <dd>
    <%_ if (relationship.otherEntityUser) { _%>
      <%_ if (relationship.relationshipManyToMany) { _%>
                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>">{{i > 0 ? ', ' : ''}}
                            {{<%= relationshipFieldName %>.<%= otherEntityField %>}}
                        </span>
      <%_ } else { _%>
                        {{<%= entityInstance + "." + relationshipFieldName %> ? <%= entityInstance + "." + relationshipFieldName + "." + otherEntityField%> : ''}}
      <%_ } _%>
    <%_ } else { _%>
      <%_ if (relationship.relationshipManyToMany) { _%>
                        <span v-for="(<%= relationshipFieldName %>, i) in <%= entityInstance %>.<%= relationshipFieldNamePlural %>" :key="<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>">{{i > 0 ? ', ' : ''}}
                            <router-link :to="{name: '<%= relationship.otherEntity.entityAngularName %>View', params: {<%= otherEntityName %>Id: <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>}}">{{<%= relationshipFieldName + "." + otherEntityField %>}}</router-link>
                        </span>
      <%_ } else { _%>
                        <div v-if="<%= entityInstance + '.' + relationshipFieldName %>">
                            <router-link :to="{name: '<%= relationship.otherEntity.entityAngularName %>View', params: {<%= otherEntityName %>Id: <%= entityInstance + "." + relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>}}">{{<%= entityInstance + "." + relationshipFieldName + "." + otherEntityField %>}}</router-link>
                        </div>
      <%_ } _%>
    <%_ } _%>
                    </dd>
  <%_ } _%>
<%_ } _%>
                </dl>
                <button type="submit"
                        @click.prevent="previousState()"
                        class="btn btn-info"
                        data-cy="entityDetailsBackButton">
                    <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.back') }}</span>
                </button>
<%_ if (!readOnly) { _%>
                <router-link v-if="<%= entityInstance %>.<%= primaryKey.name %>" :to="{name: '<%= entityAngularName %>Edit', params: {<%= entityInstance %>Id: <%= entityInstance %>.<%= primaryKey.name %>}}" custom v-slot="{ navigate }">
                    <button @click="navigate" class="btn btn-primary">
                        <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.edit') }}</span>
                    </button>
                    </router-link>
<%_ } _%>
            </div>
        </div>
    </div>
</template>

<script lang="ts" src="./<%= entityFileName %>-details.component.ts">
</script>
